<template>
	<view class="root">
		<view class="">
			<ul>
				<li v-for="(item, index) in list" :key="index" class="message-li margin-bottom_10">
					<view>
						<view class="flex justify-between list padding">
							<view>{{ item.title }}</view>
							<view class="gray date">{{ item.add_time }}</view>
						</view>
						<view class="flex justify-between list padding">
							<view class="gray68">{{ item.content }}</view>
							<view style="font-size: 28rpx;color:#FF3D3D" v-if="item.link_path"
								@tap="toDetails(item.link_path)">查看详情</view>
							<!-- <Icon :class="{ iconarrowActive: item.isOpen }" class="iconarrow" size="15" type="iconarrow"></Icon> -->
						</view>
					</view>
					<!-- <view class="content padding" :class="{ active: !item.isOpen }">
						<view class="gray68 margin-bottom_10">驳回原因:</view>
						<view class="gray">用户存在违规行为</view>
					</view> -->
				</li>
			</ul>
		</view>
		<without :showImg="isIcon" :tip="tip" :icon="icon"></without>
	</view>
</template>

<script>
	let App = getApp().globalData;
	import without from '@/components/without.vue';
	export default {
		components: {
			without
		},
		data() {
			return {
				list: [],
				tip: '暂无数据',
				isIcon: true,
				icon: "",
			};
		},
		async onLoad() {
			await this.$onLaunched;
			this.getMessageList();
			this.icon = this.$store.image_header + 'without.png'
		},
		methods: {
			change(index, item) {
				item['isOpen'] = item['isOpen'] == true ? false : true;
				console.log(item, index);
				this.$forceUpdate();
				return false;
				this.list.forEach((item, i) => {
					if (index == i && item.isOpen) {
						return (item.isOpen = !item.isOpen);
					} else {
						return (item.isOpen = i == index);
					}
				});
			},

			getMessageList() {
				let _self = this;
				let p = new Promise((reject, resolve) => {
					this.$request('SmallProgramApi/RetailMessage/getMessageList').then(res => {
						console.log(res);
						if (res.status === 1) {
							if (res.data && res.data.list && res.data.list.length > 0) {
								_self.list = _self.list.concat(res.data.list);
								_self.tip = '';
								_self.isIcon = false;
								reject(res)
							}
						} else {
							App.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
				})
				p.then(res => {
					this.readAllMessage()
				})
			},
			toDetails(url) {
				uni.navigateTo({
					url: url
				})
			},
			readAllMessage() {
				let _self = this;
				this.$request('SmallProgramApi/RetailMessage/readAllMessage').then(res => {
					if (res.status === 1) {

					} else {

					}
				})
			}
		}
	};
</script>

<style lang="less">
	@import '@/common/index.less';

	page {
		background-color: #f6f6f6;
		box-sizing: border-box;
		padding: 15rpx 25rpx;
	}

	.message-li {
		background-color: #fff;
		padding: 0 35rpx;
		border-radius: 8px;
	}

	.padding {
		padding: 20rpx 0;
	}

	.content {
		overflow: hidden;
	}

	.list {
		border-bottom: 1px solid #f6f6f6;
	}

	.iconarrow {
		transform: rotate(90deg);
	}

	.iconarrowActive {
		transform: rotate(-90deg);
	}

	.active {
		height: 0;
		padding: 0;
	}

	.gray68 {
		color: #686868;
	}

	.date {
		font-size: 26rpx;
	}
</style>
